<template>
  <section>
    <div class="modal-header">
      <div class="modal-title" v-if="organizationUnit?.id">
        <share-alt-outlined />{{ l('Edit') }}: {{ organizationUnit.displayName }}
      </div>
      <div class="modal-title" v-if="!organizationUnit?.id && !organizationUnit?.parentId">
        <share-alt-outlined />{{ l('NewOrganizationUnit') }}
      </div>
      <div
        class="modal-title"
        v-if="organizationUnit?.parentId && organizationUnit.parentDisplayName"
      >
        <share-alt-outlined />{{
          l('AddSubNodeForXParentNode', organizationUnit.parentDisplayName)
        }}
      </div>
    </div>
    <div class="modal-body">
      <a-form :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" ref="formRef">
        <a-form-item :label="l('NameOfThings')" name="displayName" :rules="[{ required: true, message: l('ThisFieldIsRequired') }]">
          <a-input
            v-model:value="form.displayName"
            :placeholder="l('NameOfThings')"
          />
        </a-form-item>
      </a-form>
    </div>
    <div class="modal-footer">
      <a-button :disabled="saving" @click="close()" type="button">
        <close-circle-outlined />
        {{ l('Cancel') }}
      </a-button>
      <a-button :loading="saving" :type="'primary'" @click="handleSubmit">
        <save-outlined />
        {{ l('Save') }}
      </a-button>
    </div>
  </section>
</template>

<script lang="ts">
  import { ModalComponentBase } from '/@/shared/component-base';
  import { OrganizationUnitServiceProxy } from '/@/shared/service-proxies';
  import { defineComponent } from 'vue';
  import {
    CreateOrganizationUnitInput,
    UpdateOrganizationUnitInput,
  } from '/@/shared/service-proxies/service-proxies';
  import { CloseCircleOutlined, SaveOutlined, ShareAltOutlined } from '@ant-design/icons-vue';

  export default defineComponent({
    name: 'create-or-edit-organiaztion-unit',
    mixins: [ModalComponentBase],
    components: {
      CloseCircleOutlined,
      SaveOutlined,
      ShareAltOutlined,
    },
    props: {
      organizationUnit: Object,
    },
    data() {
      return {
        // 表单
        formLayout: 'horizontal',
        form: {
          displayName: '',
        },
        _organizationUnitServiceProxy: new OrganizationUnitServiceProxy(),
        rules:{
          displayName:[]
        }
      };
    },
    created() {
      this._organizationUnitServiceProxy = new OrganizationUnitServiceProxy(
        this.$apiUrl,
        this.$api,
      );
      // 修改
      if (this.organizationUnit) {
        this.$nextTick(() => {
          this.form.displayName = this.organizationUnit?.displayName;
        });
      }
    },
    methods: {
      /**
       * 提交表单
       */
      handleSubmit() {
        (this.$refs.formRef as any).validate().then(() => {
          if (this.organizationUnit?.id) {
            this.updateUnit(this.form);
          } else {
            // 创建
            this.createUnit(this.form);
          }
        });
        abp.event.trigger('Closemenu', null);
      },
      /**
       * 创建
       */
      createUnit(parmas: any) {
        let createOrganization: CreateOrganizationUnitInput = new CreateOrganizationUnitInput();
        createOrganization.init(parmas);
        createOrganization.parentId = this.organizationUnit?.parentId;
        this.saving = true;
        this._organizationUnitServiceProxy
          .create(createOrganization)
          .finally(() => {
            this.saving = false;
          })
          .then((result) => {
            this.notify.success(this.l('SavedSuccessfully'));
            this.success(result);
          });
      },
      /**
       * 编辑
       */
      updateUnit(formdata: any) {
        let uporganizationinput: UpdateOrganizationUnitInput = new UpdateOrganizationUnitInput();
        uporganizationinput.init(this.organizationUnit);
        uporganizationinput.displayName = formdata.displayName;
        this.saving = true;
        this._organizationUnitServiceProxy
          .update(uporganizationinput)
          .finally(() => {
            this.saving = false;
          })
          .then((result) => {
            this.notify.success(this.l('SavedSuccessfully'));
            this.success(result);
          });
      },
    },
  });
</script>

<style scoped lang="less">
  .modal-header {
    .anticon-share-alt {
      margin-right: 10px;
    }
  }
</style>
